<template>
  <div class="home app_content">
    <!-- 导航栏 -->
    <!-- <div class="header_body">
      <header-nav :leftArrow="false" titelText="基层消防监督执法"></header-nav>
    </div> -->

    <div class="content_body">
      <div class="body_top">
        <div class="title1">
          <!-- <img class="logo" src="../assets/images/homeLogo.png" alt="" /> -->
          <div class="text">基层消防监督执法平台</div>
        </div>
        <div class="title2 titleRow1">推动加强基层消防安全管理</div>
        <div class="title2 titleRow2">夯实农村火灾防控基础</div>
      </div>

      <div class="body_items">
        <div class="top">
          <div class="box" @click="goNext('superviseList')">
            <img src="../assets/images/xf-img.png" alt="">
            <div class="title">消防监督检查</div>
          </div>
          <div class="box" @click="goNext('daysList')">
            <img src="../assets/images/rc-img.png" alt="">
            <div class="title">日常消防巡查</div>
          </div>
          <div class="box" @click="goNext('tasksList')">
            <img src="../assets/images/xzxurw-img.png" alt="">
            <div class="title">行政许可任务</div>
          </div>
        </div>

        <div class="task">
          <div class="manageTitle">
            <div class="icon"></div>
            <div class="text">审批管理</div>
          </div>
          <div class="task_item">
            <div class="task1" @click="goNext('approvalList')">
              任务审批
            </div>
            <div class="task2" @click="goNext('approveList')">
              行政许可审批
            </div>
          </div>
        </div>
        <div class="case-box">
          <div class="manageTitle">
            <div class="icon"></div>
            <div class="text">案件管理</div>
          </div>
          <div class="case_item">
            <div class="case case1" @click="goNext('registerList')">
              一般程序
              <div class="inverted1"></div>
            </div>
            <div class="case case2" @click="goNext('punishList')">
              当场处罚
              <div class="inverted2"></div>
            </div>
          </div>
          <div class="case_item">
            <div class="case case3" @click="goNext('statistics')">
              案件统计
              <div class="inverted3"></div>
            </div>
            <div class="case case4" @click="goNext('filingList')">
              立案审批
              <div class="inverted4"></div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 20px"></div>
    </div>

    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Home">
const { useLogin } = $globalStore

const router = useRouter()

const goNext = (val) => {
  router.push({ name: val })
}

onMounted(async () => {

  const res = await useLogin.getUserInfo()
  sessionStorage.setItem('userInfo', JSON.stringify(res.data))
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: calc(100% - 50px);
  overflow: auto;

  .content_body {
    height: calc(100% - 6rem);
    margin-bottom: 5.125rem;

    .body_top {
      width: 100%;
      background: url('../assets/images/homeTopBg.png') no-repeat;
      background-size: 100% 100%;

      .title1 {
        padding: 45px 24px 0 24px;
        display: flex;
        align-items: center;

        .logo {
          width: 26px;
          height: 26px;
          margin-right: 2px;
        }

        .text {
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 26px;
          color: #ffffff;
        }
      }

      .title2 {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 23px;
        color: #ffffff;
        padding: 0 24px;
      }

      .titleRow1 {
        padding-top: 12px;
      }

      .titleRow2 {
        padding-bottom: 70px;
      }
    }

    .body_items {
      margin-top: -25px;
      border-radius: 24px 24px 0 0;
      background-color: #ffffff;

      .top {
        display: flex;
        justify-content: center;

        .box {
          width: 33%;
          margin-top: 2rem;
          text-align: center;

          img {
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 4.5rem;
          }

          .title {
            margin-top: 4px;
            /** 文本1 */
            font-size: 14px;
            font-weight: 400;
            color: rgba(43, 43, 43, 1);
          }
        }

        // .box:nth-of-type(2) {
        //   margin-left: 2rem;
        //   margin-right: 2rem;
        // }
      }

      .task {
        padding: 0 16px;

        .task_item {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .task1 {
            width: 10.5rem;
            height: 5rem;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            background: url('../assets/images/rwsp-img.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 10px;
            flex-grow: 1;
            box-sizing: border-box;
            padding-left: 0.8rem;
            line-height: 5rem;
            /** 文本1 */
            font-size: 1rem;
            font-weight: 400;
            color: rgba(43, 43, 43, 1);
          }

          .task2 {
            width: 10.5rem;
            height: 5rem;
            border-radius: 0.5rem;
            background: url('../assets/images/xzxksp-img.png') no-repeat;
            background-size: 100% 100%;
            flex-grow: 1;
            box-sizing: border-box;
            padding-left: 0.8rem;
            line-height: 5rem;
            /** 文本1 */
            font-size: 1rem;
            font-weight: 400;
            color: rgba(43, 43, 43, 1);
            flex-grow: 1;
          }

        }
      }

      .case-box {
        padding: 0 16px;

        .case_item {
          display: flex;
          justify-content: space-between;

          .case {
            padding-top: 1rem;
            width: 10.5rem;
            height: 5rem;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            background-size: 100% 100%;
            flex-grow: 1;
            box-sizing: border-box;
            padding-left: 0.8rem;
            /** 文本1 */
            /** 文本1 */
            font-size: 0.875rem;
            font-weight: 400;
            color: rgba(43, 43, 43, 1);
          }

          .case1 {
            margin-right: 10px;
            background: url('../assets/images/ybcx-img.png') no-repeat;
            background-size: cover;
          }

          .case2 {
            background: url('../assets/images/dccf-img.png') no-repeat;
            margin-right: 0;
            background-size: cover;
          }

          .case3 {
            background: url('../assets/images/ajtj-img.png') no-repeat;
            margin-right: 10px;
            background-size: cover;
          }

          .case4 {
            background: url('../assets/images/lasp-img.png') no-repeat;
            margin-right: 0;
            background-size: cover;
          }
        }
      }
    }
  }
}

.manageTitle {
  display: flex;
  align-items: center;
  padding: 20px 0 12px 0;

  .icon {
    width: 4px;
    height: 14px;
    border-radius: 20px;
    margin-right: 4px;
    background: linear-gradient(180deg,
        rgba(86, 136, 245, 1) 0%,
        rgba(23, 100, 206, 1) 100%);
  }

  .text {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 23px;
    color: #000000;
  }
}

.inverted1 {
  width: 58px;
  height: 6px;
  background-color: rgba(104, 47, 230, 0.2);
  border-radius: 60px;
  margin-top: -5px;
}

.inverted2 {
  width: 58px;
  height: 6px;
  background: rgba(230, 53, 53, 0.2);
  border-radius: 60px;
  margin-top: -5px;
}

.inverted3 {
  width: 58px;
  height: 6px;
  background: rgba(12, 156, 234, 0.2);
  border-radius: 60px;
  margin-top: -5px;
}

.inverted4 {
  width: 58px;
  height: 6px;
  background: rgba(241, 181, 85, 0.2);
  border-radius: 60px;
  margin-top: -5px;
}
</style>
